<template>
  <div>
    <div class="fail" v-if="active != 0 && fail.status == 2">审核失败：{{fail.fail_reason}}</div>
    <!-- <div class="pop-title">上传资料</div> -->
    <van-steps class="van-steps" :active="active" active-color="#38f" finish-icon="success" active-icon="info">
      <van-step>开户类型</van-step>
      <van-step>开户信息</van-step>
      <van-step>绑银行卡</van-step>
    </van-steps>
    <!-- 第一步 开户类型 -->
    <div class="one-steps" v-if="active == 0">
      <div class="tips">请谨慎选择开户类型，开户后不可进行修改!</div>
      <van-radio-group v-model="type" class="checked-type">
        <van-radio name="1">个人用户</van-radio>
        <van-radio name="2">企业用户</van-radio>
      </van-radio-group>
    </div>
    <!-- 第二步 身份信息 -->
    <div v-if="active == 1">
      <!-- 个人用户开户信息 -->
      <div class="steps-new" v-if="type == 1">
        <div class="title">实名认证</div>
        <div class="setForm">
          <div class="form-lable">姓名</div>
          <div class="form-input"><input v-model="user_name" placeholder="请输入真实姓名" /></div>
        </div>
        <div class="setForm">
          <div class="form-lable">证件类型</div>
          <div class="form-input"><input disabled value="身份证" /></div>
        </div>
        <div class="setForm">
          <div class="form-lable">证件号码</div>
          <div class="form-input"><input maxlength="" v-model="cert_id" placeholder="请输入证件号码" /></div>
        </div>
        <div class="setForm">
          <div class="form-lable">手机号码</div>
          <div class="form-input"><input text="number" v-model="tel_no" maxlength="11" placeholder="请输入需要绑定的手机号" /></div>
        </div>
      </div>
        <!-- 企业用户开户信息 -->
      <template v-else-if="type == 2">
        <div class="steps-new">
          <div class="title">企业信息</div>
          <div class="setForm">
            <div class="form-lable">企业名称</div>
            <div class="form-input"><input v-model="name" placeholder="请输入企业名称" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">企业所在地</div>
            <div class="form-input" @click="showSelectId()"><input v-model="area" disabled placeholder="请选择省市区" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">企业地址</div>
            <div class="form-input"><input v-model="address" placeholder="请输入企业地址" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">统一社会信用代码</div>
            <div class="form-input"><input v-model="social_credit_code" placeholder="请输入社会信用代码" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">社会信用证有效期</div>
            <wx-picker mode="date" :start="minDate" :end="maxDate" @change="wxStartDateConfirmSocial" value="social_credit_code_expires">
              <div class="form-input" @click="onClickData('social')"><input v-model="social_credit_code_expires" disabled style="width: 80%" placeholder="请选择社会信用证有效期" /></div>
            </wx-picker>
            <van-checkbox v-model="socialChecked" shape="square" class="expiresChecked">永久</van-checkbox>
          </div>
          <div class="setForm">
            <div class="form-lable">经营范围</div>
            <div class="form-input"><textarea v-model="business_scope" placeholder="请输入经营范围" /></div>
          </div>
        </div>
        <div class="steps-new">
          <div class="title">法人信息</div>
          <div class="setForm">
            <div class="form-lable">法人姓名</div>
            <div class="form-input"><input v-model="legal_person" placeholder="请输入法人姓名" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">法人身份证号</div>
            <div class="form-input"><input maxlength="23" v-model="legal_cert_id" placeholder="请输入法人身份证号" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">法人身份证有效期</div>
            <wx-picker mode="date" :start="minDate" :end="maxDate" @change="wxStartDateConfirm" value="legal_cert_id_expires">
              <div class="form-input"><input v-model="legal_cert_id_expires" disabled style="width: 80%" placeholder="请选择法人身份证证有效期" /></div>
            </wx-picker>
            <van-checkbox v-model="expiresChecked" shape="square" class="expiresChecked">永久</van-checkbox>
          </div>
          <div class="setForm">
            <div class="form-lable">法人手机号</div>
            <div class="form-input"><input maxlength="11" text="number" v-model="legal_mp" placeholder="请输入法人手机号" /></div>
          </div>
        </div>
        <div class="steps-new lastStep">
          <div class="title">上传资质</div>
          <div class="setForm">
            <div class="form-lable">三证合一证件照</div>
            <div class="upload-card">
              <!-- <UploadImg ref="uploadImgIdentification" :fileListPre="identification_photo" previewSize="150px" :typeImage="identification_photo ? identification_photo :'https://img.wifenxiao.com/h5-wfx/images/identification_photo.png'" maxCount="1" @uploadImgList="uploadImgIdentification" class="img-lists"></UploadImg> -->
              <UploadImg ref="uploadImgIdentification" class="img-lists" :isUploadSfz="true" :previewSize="true" :sfzBg="identification_photo ? identification_photo :'https://img.wifenxiao.com/h5-wfx/images/identification_photo.png'"  :maxLength="1" @changeImgList="uploadImgIdentification" :isChangeStyle="true"></UploadImg>
            </div>
          </div>
          <div class="setForm">
            <div class="form-lable">上传法人身份证照片</div>
            <div class="upload-card">
              <UploadImg ref="uploadImgChildA" class="img-lists" :isUploadSfz="true" :previewSize="true" :sfzBg="front_photo_of_id ? front_photo_of_id :'https://img.wifenxiao.com/h5-wfx/images/shenfenz-a.png'" :maxLength="1" @changeImgList="uploadImgCardA" :isChangeStyle="true"></UploadImg>
              <UploadImg ref="uploadImgChildB" class="img-lists" :isUploadSfz="true" :previewSize="true" :sfzBg="back_photo_of_id ? back_photo_of_id :'https://img.wifenxiao.com/h5-wfx/images/shenfenz-b.png'"  :maxLength="1" @changeImgList="uploadImgCardB" :isChangeStyle="true"></UploadImg>
              <!-- <UploadImg ref="uploadImgChildA" previewSize="150px" :fileListPre="front_photo_of_id" :typeImage="front_photo_of_id ? front_photo_of_id :'https://img.wifenxiao.com/h5-wfx/images/shenfenz-a.png'" maxCount="1" @uploadImgList="uploadImgCardA" class="img-lists"></UploadImg>
              <UploadImg ref="uploadImgChildB" previewSize="150px" :fileListPre="back_photo_of_id" :typeImage="back_photo_of_id ? back_photo_of_id :'https://img.wifenxiao.com/h5-wfx/images/shenfenz-b.png'" maxCount="1" @uploadImgList="uploadImgCardB" class="img-lists"></UploadImg> -->
            </div>
          </div>
        </div>
      </template>
    </div>
    <!-- 第三步 银行卡信息 -->
    <div v-if="active == 2">
      <div class="steps-new">
        <div  class="title">银行卡信息</div>
        <!-- 个人用户银行卡信息 -->
        <div v-if="type == 1">
          <div class="setForm">
            <div class="form-lable">持卡人证件号码</div>
            <div class="form-input"><input maxlength="" v-model="cert_id" placeholder="请输入证件号码" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">持卡人手机号码</div>
            <div class="form-input"><input text="number" v-model="tel_no" maxlength="11" placeholder="请输入需要绑定的手机号" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">持卡人姓名</div>
            <div class="form-input"><input v-model="card_name" placeholder="请输入持卡人姓名" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">银行卡号</div>
            <div class="form-input"><input v-model="card_id" placeholder="请输入银行卡号" /></div>
            <div class="form-tips">注意：请勿填写信用卡卡号</div>
          </div>
          <div class="setForm">
            <div class="form-lable">银行账户类型</div>
            <div class="form-input radioMg">
              <van-radio-group v-model="bank_acct_type" direction="horizontal">
                <!-- <van-radio name="1">对公</van-radio> -->
                <van-radio name="2">对私</van-radio>
              </van-radio-group>
            </div>
          </div>
          <template v-if="bank_acct_type == 1">

              <div class="setForm">
                <div class="form-lable">银行卡开户行名称</div>
                <div class="form-input" @click="showSelectBank()"><input v-model="person_bank_code_name" disabled :focus="false" placeholder="请选择银行卡开户行名称" /></div>
              </div>
              <div class="setForm">
                <div class="form-lable">银行卡分行地址</div>
                <div class="form-input" @click="showSelectId()"><input v-model="areaPerson" disabled :focus="false" placeholder="请选择银行卡分行地址" /></div>
              </div>
          </template>
          <!-- <div class="setForm">
            <div class="form-lable">手机号码</div>
            <div class="form-input"><input v-model="tel_no" maxlength="11" placeholder="请输入需要绑定的手机号" /></div>
          </div> -->
        </div>
        <!--企业银行卡信息 -->
        <div v-if="type == 2">
          <div class="setForm">
            <div class="form-lable">持卡人姓名</div>
            <div class="form-input"><input v-model="card_name" placeholder="请输入持卡人姓名" /></div>
            <div class="form-tips">注意：若银行账户类型是对公，必须与企业名称一致</div>
          </div>
          <div class="setForm">
            <div class="form-lable">银行卡号</div>
            <div class="form-input"><input v-model="card_no" placeholder="请输入银行卡号" /></div>
            <div class="form-tips">注意：请勿填写信用卡卡号</div>
          </div>
          <div class="setForm">
            <div class="form-lable">银行卡开户行名称</div>
            <div class="form-input" @click="showSelectBank()"><input v-model="bank_code_name" disabled :focus="false" placeholder="请选择银行卡开户行名称" /></div>
          </div>
          <div class="setForm">
            <div class="form-lable">银行账户类型</div>
            <div class="form-input radioMg">
              <van-radio-group v-model="bank_acct_type" direction="horizontal">
                <van-radio name="1">对公</van-radio>
                <van-radio name="2">对私</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
        <div v-if="type == 2" class="steps-new lastStep">
          <div class="title">上传资质</div>
          <template v-if="bank_acct_type == 1">
            <div class="setForm">
              <div class="form-lable">开户银行许可证照</div>
              <div class="upload-card">
                <!-- <UploadImg ref="uploadImgCardPhoto" previewSize="150px" :typeImage="photo_of_open_bank?photo_of_open_bank:'https://img.wifenxiao.com/h5-wfx/images/hfXkz.png'" maxCount="1" @uploadImgList="uploadImgCardPhoto" class="img-lists"></UploadImg> -->
                <UploadImg ref="uploadImgCardPhoto" class="img-lists" :isUploadSfz="true" :previewSize="true" sfzBg="https://img.wifenxiao.com/h5-wfx/images/hfXkz.png?v=1" :maxLength="1" @changeImgList="uploadImgCardPhoto" :isChangeStyle="true"></UploadImg>

              </div>
            </div>
          </template>
          <template v-else>
            <div class="setForm">
              <div class="form-lable"> 银行卡照片</div>
              <div class="upload-card">
                <!-- <UploadImg ref="uploadImgCardBank" :typeImage="photo_of_bank_card?photo_of_bank_card:'https://img.wifenxiao.com/h5-wfx/images/bankList.png'" previewSize="150px" maxCount="1" @uploadImgList="uploadImgCardBank" class="img-lists"></UploadImg> -->
                <UploadImg ref="uploadImgCardBank" class="img-lists" :isUploadSfz="true" :previewSize="true" sfzBg="https://img.wifenxiao.com/h5-wfx/images/bankList.png" :maxLength="1" @changeImgList="uploadImgCardBank" :isChangeStyle="true"></UploadImg>

              </div>
            </div>
          </template>
        </div>
    </div>
    <div class="btn-whole">
      <div class="form-tips" v-if="type == 1 && active == 1">实名认证后将不可修改账户类型</div>
      <!-- <div class="form-tips" v-else>上传资料后需要耐心等待几秒钟</div> -->
      <div class="btn-items">
        <van-button class="btn warning-btn" @click="closePop">关闭</van-button>
        <template v-if="active == 0 || (type == 1 && active == 2) || hfActive == 5">
          <van-button class="btn light-blue-btn disabled-btn">上一步</van-button>
        </template>
        <template v-else>
          <van-button class="btn light-blue-btn" @click="stepUp">上一步</van-button>
        </template>
        <van-button class="btn light-blue-btn" @click="stepSuccess()" v-if="active == 2">完成</van-button>
        <van-button class="btn light-blue-btn" @click="stepNext" v-else>下一步</van-button>
      </div>
    </div>
    <map-area :visible.sync="showAreaPop" @onSelect="onSelectCity"></map-area>
    <van-popup v-model="showBankPop" round position="bottom" class="area-pop">
      <div class="area-title">
        <span class="area-title-btn" @click="showBankPop = false">取消</span>
        <span class="area-title-con">开户行名称</span>
        <span class="area-title-btn" @click="handleConfirmBank">确认</span>
      </div>
      <van-picker
        :columns="bank_list"
        @change="onBankChange" 
      />
    </van-popup>
  </div>
</template>
<script>
import Vue from 'vue'
import { Step, Steps, Toast, RadioGroup, Radio, Picker, DatetimePicker, Checkbox } from 'vant'
Vue.use(Step).use(Steps).use(Toast).use(RadioGroup).use(Radio).use(Picker).use(DatetimePicker).use(Checkbox)
// import UploadImg from '@/components/UploadImg'
import MapArea from './mapArea.vue'
import { hfSettleChange, hfCreate, hfSettleCreate, hfGetBank, hfCorpMember, hfCorpUpdate, hfCorpGetInfo, hfCorpMemberInfo } from '@/api/hfAuth/index'
import { formatDay } from '@/utils/index'
import UploadImg from '@/components/SmallUploadImg/index.vue'

export default {
  components: {
    UploadImg,
    MapArea
  },
  props: {
    hfActive: {
      type: [String, Number],
      default: 0
    },
    hfType: {
      type: [String, Number],
      default: 1
    },
    numClick: {
      type: Number,
      default: 0
    },
    hfChangeCard: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.minDate = this.formatTime(new Date(new Date().getFullYear() - 70, 1, 1))
    this.maxDate = this.formatTime(new Date(new Date().getFullYear() + 70, 1, 1))
    this.currentDate = this.formatTime(new Date())
    if (this.hfActive == 5) {
      this.active = 1
      this.onUpdate()
    } else {
      this.active = this.hfActive
    }
    this.type = this.hfType
    if (this.hfActive == 2 && this.hfType == 1) {
      this.onMember()
    }
  },
  data() {
    return {
      expiresChecked: false,
      socialChecked: false,
      showBankPop: false,
      bank_list: [], // 银行列表
      showAreaPop: false,
      currentDate: new Date(),
      dataCurrent: 0,
      minDate: '',
      maxDate: '',
      // 个人
      active: 0,
      type: '1', // 1：个人 2：企业
      tel_no: '', // 手机号码
      user_name: '', // 姓名
      cert_id: '', // 证件号
      areaPerson: '',
      person_prov_code: '',
      person_area_code: '',
      person_bank_code: '',
      person_bank_code_name: '',
      card_name: '',
      card_id: '',
      bank_acct_type: '1', // 账户类型
      // 企业
      area: '',
      name: '', // 企业名称
      prov_code: '', // 企业省份
      area_code: '', // 市区编码
      address: '', // 企业地址
      social_credit_code: '', // 社会信用代码
      social_credit_code_expires: '', // 社会信用证有效期
      business_scope: '', // 经营范围
      legal_person: '', // 法人姓名
      legal_cert_id: '', // 法人身份证号
      legal_cert_id_expires: '', // 法人身份证有效期
      legal_mp: '', // 法人手机号
      identification_photo: '', // 三证合一证件照
      front_photo_of_id: '', // 法人身份证正面照
      back_photo_of_id: '', // 法人身份证反面照
      card_no: '', // 卡号
      // card_name: '', // 户名
      bank_code: '', // 银行编码
      bank_code_name: '', // 银行名称
      photo_of_open_bank: '', // 开户行许可证
      photo_of_bank_card: '', // 银行卡照片
      save_bank: {},
      fail: {
        fail_reason: '',
        status: 0,
        status_name: ''
      }
    }
  },
  watch: {
    numClick(val) {
      // console.log(333, val)
      // 审核失败
      if (this.hfActive == 5) {
        this.active = 1
        this.onUpdate()
      } else {
        this.active = this.hfActive
      }
      this.type = this.hfType
      if (this.hfActive == 2 && this.hfType == 1) {
        this.onMember()
      }
    }
  },
  methods: {
    // 身份证有效期
    wxStartDateConfirm(e) {
      // console.log('e', e)
      this.legal_cert_id_expires = e.detail.value
    },
    // 统一社会证照有效期
    wxStartDateConfirmSocial(e) {
      // console.log('e', e)
      this.currentDate = new Date()
      this.social_credit_code_expires = e.detail.value
    },
    onUpdate() {
      this.$loadingWrap.show()
      hfCorpGetInfo().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.name = res.data.name
          this.prov_code = res.data.prov_code
          this.area_code = res.data.area_code
          this.address = res.data.address
          this.social_credit_code = res.data.social_credit_code
          this.social_credit_code_expires = res.data.social_credit_code_expires
          this.business_scope = res.data.business_scope
          this.legal_person = res.data.legal_person
          this.legal_cert_id = res.data.legal_cert_id
          if (res.data.legal_cert_id_expires == '20991231') {
            this.expiresChecked = true
            this.legal_cert_id_expires = ''
          } else {
            this.expiresChecked = false
            this.legal_cert_id_expires = res.data.legal_cert_id_expires
          }
          if (res.data.social_credit_code_expires == '20991231') {
            this.socialChecked = true
            this.legal_cert_id_expires = ''
          } else {
            this.socialChecked = false
            this.social_credit_code_expires = res.data.social_credit_code_expires
          }
          this.legal_mp = res.data.legal_mp
          this.identification_photo = res.data.identification_photo
          this.front_photo_of_id = res.data.front_photo_of_id
          this.back_photo_of_id = res.data.back_photo_of_id
          this.card_name = res.data.card_name
          this.card_no = res.data.card_no
          this.bank_code = res.data.bank_code
          this.bank_acct_type = res.data.bank_acct_type
          this.photo_of_open_bank = res.data.photo_of_open_bank
          this.photo_of_bank_card = res.data.photo_of_bank_card
          this.area = `${res.data.prov_code_name} ${res.data.area_code_name}`
          this.bank_code_name = res.data.bank_code_name
          this.fail.fail_reason = res.data.fail_reason
          this.fail.status = res.data.status
          this.fail.status_name = res.data.status_name
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onMember() {
      this.$loadingWrap.show()
      hfCorpMemberInfo().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.cert_id = res.data.cert_id
          this.tel_no = res.data.mobile
          this.bank_acct_type = res.data.bank_acct_type
          this.card_name = res.data.user_name
        } else {
          this.$Error(res.msg)
        }
      })
    },
    formatTime(time) {
      const t = time.getTime()
      return formatDay(t)
    },
    // 显示省市弹出框
    showSelectId() {
      this.showAreaPop = true
      // this.cityCodeType = 1
    },
    // 选择省市编码
    onSelectCity(data) {
      // console.log('onSelectCity', data)
      // 个人银行所在省市
      if (this.type == 1 && this.active == 2) {
        this.areaPerson = `${data.province_name} ${data.city_name}`
        this.person_prov_code = data.province_id
        this.person_area_code = data.city_id
      } else if (this.type == 2 && this.active == 1) {
        // 企业地址
        this.area = `${data.province_name} ${data.city_name}`
        this.prov_code = data.province_id
        this.area_code = data.city_id
      }

      this.showAreaPop = false
    },
    onBankChange(picker, value, index) {
      this.save_bank = value
    },
    handleConfirmBank() {
      this.showBankPop = false
      // console.log('this.save_bank', this.save_bank, this.type)
      if (this.type == 1) {
        this.person_bank_code = this.save_bank.code
        this.person_bank_code_name = this.save_bank.name
      } else if (this.type == 2) {
        this.bank_code = this.save_bank.code
        this.bank_code_name = this.save_bank.name
      }
    },
    handleConfirmData() {
      this.showBankData = false
    },
    // 显示银行编码
    showSelectBank() {
      this.$loadingWrap.show()
      hfGetBank().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resp = res.data
          resp.forEach(item => {
            item.text = item.name
          })
          const obj = { text: '选择银行名称' }
          resp.unshift(obj)
          this.bank_list = resp
          this.showBankPop = true
        } else {
          this.$Error(res.msg)
        }
      })
    },
    stepUp() {
      this.active--
    },
    stepNext() {
      if (this.active == 0) {
        this.active++
        return
      }
      // 个人实名 -- 创建用户
      if (this.active == 1 && this.type == 1) {
        if (this.user_name == '') {
          this.$Error('请填写用户姓名')
        } else if (this.cert_id.length != 18) {
          this.$Error('请填写正确的用户证件号')
        } else if (this.tel_no.length != 11) {
          this.$Error('请填写正确的用户手机号')
        } else {
          this.$loadingWrap.show()
          hfCreate({
            tel_no: this.tel_no,
            user_name: this.user_name,
            cert_id: this.cert_id
          }).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.active++
              this.bank_acct_type = '2'
            } else {
              this.$Error(res.msg)
            }
          })
        }
      } else if (this.active == 1 && this.type == 2) {
        if (this.name == '') {
          this.$Error('请填写企业名称')
        } else if (this.area == '') {
          this.$Error('请选择企业所在地')
        } else if (this.address == '') {
          this.$Error('请填写企业地址')
        } else if (this.social_credit_code == '') {
          this.$Error('请填写社会信用代码')
        } else if (this.social_credit_code_expires == '' && !this.socialChecked) {
          this.$Error('请选择社会信用证有效期')
        } else if (this.business_scope == '') {
          this.$Error('请填写经营范围')
        } else if (this.legal_person == '') {
          this.$Error('请填写法人姓名')
        } else if (this.legal_cert_id == '') {
          this.$Error('请填写法人身份证号')
        } else if (this.legal_cert_id_expires == '' && !this.expiresChecked) {
          this.$Error('请选择法人身份证有效期')
        } else if (this.legal_mp == '') {
          this.$Error('请填写法人手机号')
        } else if (this.identification_photo == '') {
          this.$Error('请上传三证合一证件照')
        } else if (this.front_photo_of_id == '') {
          this.$Error('请上传法人身份证正面照')
        } else if (this.back_photo_of_id == '') {
          this.$Error('请上传法人身份证反面照')
        } else {
          this.active++
        }
      }
    },
    hfSettle(method, msg) {
      method({
        user_name: this.user_name,
        cert_id: this.cert_id,
        card_id: this.card_id,
        card_name: this.card_name,
        bank_acct_type: this.bank_acct_type,
        prov_code: this.person_prov_code,
        area_code: this.person_area_code,
        bank_code: this.person_bank_code,
        tel_no: this.tel_no
      }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$emit('close', 'success')
          this.$Error(msg)
        } else {
          this.$Error(res.msg)
        }
      })
    },
    stepSuccess() {
      if (this.type == 1) {
        // 个人实名 -- 创建结算用户
        if (this.tel_no.length != 11) {
          this.$Error('请填写正确的用户手机号')
        } else if (this.cert_id.length != 18) {
          this.$Error('请填写正确的用户证件号')
        } else if (this.card_name == '') {
          this.$Error('请填写持卡人姓名')
        } else if (this.card_id == '') {
          this.$Error('请填写银行卡号')
        } else if (this.bank_acct_type == 1 && this.person_bank_code == '') {
          this.$Error('请选择银行卡开户行名称')
        } else if (this.bank_acct_type == 1 && this.areaPerson == '') {
          this.$Error('请选择银行卡分行地址')
        } else {
          this.$loadingWrap.show()
          if (this.hfChangeCard) {
            this.hfSettle(hfSettleChange, '更换银行卡成功')
          } else {
            this.hfSettle(hfSettleCreate, '认证成功')
          }
        }
      } else if (this.type == 2) {
        // 企业-- 创建结算用户
        if (this.card_name == '') {
          this.$Error('请填写持卡人姓名')
        } else if (this.card_no == '') {
          this.$Error('请填写银行卡号')
        } else if (this.bank_code_name == '') {
          this.$Error('请选择银行卡开户行名称')
        } else if (this.bank_acct_type == 1 && this.photo_of_open_bank == '') {
          this.$Error('请上传开户银行许可证照')
        } else if (this.bank_acct_type == 2 && this.photo_of_bank_card == '') {
          this.$Error('请选上传法人银行卡照片')
        } else {
          this.$loadingWrap.show()
          const params = {
            name: this.name,
            prov_code: this.prov_code,
            area_code: this.area_code,
            address: this.address,
            social_credit_code: this.social_credit_code,
            social_credit_code_expires: this.socialChecked ? ' 20991231' : (this.social_credit_code_expires).split('-').join(''),
            business_scope: this.business_scope,
            legal_person: this.legal_person,
            legal_cert_id: this.legal_cert_id,
            legal_cert_id_expires: this.expiresChecked ? ' 20991231' : (this.legal_cert_id_expires).split('-').join(''),
            legal_mp: this.legal_mp,
            identification_photo: this.identification_photo,
            front_photo_of_id: this.front_photo_of_id,
            back_photo_of_id: this.back_photo_of_id,
            card_name: this.card_name,
            card_no: this.card_no,
            bank_code: this.bank_code,
            bank_acct_type: this.bank_acct_type,
            photo_of_open_bank: this.photo_of_open_bank,
            photo_of_bank_card: this.photo_of_bank_card
          }
          hfCorpMember(params).then(res => {
              this.$loadingWrap.close()
              if (res.status == 1) {
                this.$emit('close', 'success')
                this.$Error('资料审核中')
              } else {
                this.$Error(res.msg)
              }
            })
          // if (this.hfActive == 5) {
          //   hfCorpUpdate(params).then(res => {
          //     this.$loadingWrap.close()
          //     if (res.status == 1) {
          //       this.$emit('close', 'success')
          //       this.$Error('资料审核中')
          //     } else {
          //       this.$Error(res.msg)
          //     }
          //   })
          // } else {
          //   hfCorpMember(params).then(res => {
          //     this.$loadingWrap.close()
          //     if (res.status == 1) {
          //       this.$emit('close', 'success')
          //       this.$Error('资料审核中')
          //     } else {
          //       this.$Error(res.msg)
          //     }
          //   })
          // }
        }
      }
    },
    // 关闭弹出框
    closePop() {
      this.$emit('close')
      this.expiresChecked = false
      this.socialChecked = false
      this.showBankPop = false
      this.bank_list = []
      this.showAreaPop = false
      this.currentDate = new Date()
      this.dataCurrent = 0
      this.minDate = new Date(new Date().getFullYear() - 70, 1, 1)
      this.maxDate = new Date(new Date().getFullYear() + 70, 1, 1)
      // 个人
      this.active = 0
      this.type = '1'
      this.tel_no = ''
      this.user_name = ''
      this.cert_id = ''
      this.areaPerson = ''
      this.person_prov_code = ''
      this.person_area_code = ''
      this.person_bank_code = ''
      this.person_bank_code_name = ''
      this.card_name = ''
      this.card_id = ''
      this.bank_acct_type = '1'
      this.area = ''
      this.name = ''
      this.prov_code = ''
      this.area_code = ''
      this.address = ''
      this.social_credit_code = ''
      this.social_credit_code_expires = ''
      this.business_scope = ''
      this.legal_person = ''
      this.legal_cert_id = ''
      this.legal_cert_id_expires = ''
      this.legal_mp = ''
      this.identification_photo = ''
      this.front_photo_of_id = ''
      this.back_photo_of_id = ''
      this.card_no = ''
      this.bank_code = ''
      this.bank_code_name = ''
      this.photo_of_open_bank = ''
      this.photo_of_bank_card = ''
      this.save_bank = {}
    },
    // 上传身份证正面
    uploadImgCardA(val) {
      // console.log('val', val[0].url)
      this.front_photo_of_id = val[0]
    },
    // 上传身份证反面
    uploadImgCardB(val) {
      this.back_photo_of_id = val[0]
    },
    // 开户银行许可证
    uploadImgCardPhoto(val) {
      this.photo_of_open_bank = val[0]
    },
    // 银行卡照片
    uploadImgCardBank(val) {
      this.photo_of_bank_card = val[0]
    },
    // 三证合一
    uploadImgIdentification(val) {
      this.identification_photo = val[0]
    }
  }
}
</script>
<style lang="scss">
.van-steps {
  padding: 30px 40px!important;
  .van-step__title, .van-step__icon {
    font-size: 24px!important
  }
  .van-step__circle-container {
    top: 50px!important
  }
  .van-step__line {
    top: 50px!important
  }
}
.pop-title {
  font-size: 30px;
  text-align: center;
  margin: 30px 0 20px 0;
}
.one-steps {
  .tips {
    // width: 80%;
    margin: 40px auto;
    font-weight: 500;
    text-align: center;
    font-size: 28px;
  }
  .checked-type {
    .van-icon-success {
      font-size: 40px!important;
    }
    .van-radio__label {
      // margin-left: 100px!important;
      position: relative;
      top: 4px;
    }
    .van-radio__icon {
      position: relative;
      top: -10px;
      margin-right: 20px;
    }
    >div {
      width: 90%;
      padding: 60px 20px;
      margin: 40px auto;
      background: #fff;
      font-size: 40px;
      border-radius: 20px;

    }

  }
}
.steps-new {
  margin: 20px 0;
  padding: 20px;
  background: #fff;
  .h5-select {
    background: none !important;;
  }
  .title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .setForm {
    padding: 20px;
    font-size: 26px;
    position: relative;
    .expiresChecked {
      position: absolute;
      padding: 10px;
      background: #fff;
      right: -2px;
      bottom: 40px;
    }
    .form-lable {
      padding-bottom: 10px;
    }
    .form-input {
      position: relative;
      border-bottom: 1px solid #e2e2e2;
      &.radioMg {
        border: none;
        margin-top: 20px;
        padding: 10px 0;
      }
      input {
        height: 30px;
        line-height: 30px;
        width: 100%;
        // padding-bottom: 20px;
      }
      textarea {
        border: 1px solid #e2e2e2;
        padding: 20px 0;
        width: 100%;
        height: 200px
      }
      .code {
        padding: 20px;
        position: absolute;
        right: 0px;
        top: 0px;
        background: #38f;
        color: #fff;
        &.set-code {
          background-color: #ccc;
          // color: #000
        }
      }
    }
    .form-tips {
      color: red;
      font-size: 24px;
      padding-top: 20px;
    }
  }
}
.van-step--horizontal .van-step__icon {
  padding-left: 30px;
}
.van-step--horizontal:last-child .van-step__circle-container {
  padding-right: 40px;
}
.van-step--horizontal .van-step__icon {
  padding-left: 0;
}
.btn-whole {
  position: fixed;
  background: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  .form-tips {
    text-align: center;
    color: red;
    margin-bottom: 20px;
  }
}
.btn-items {
  // padding-top: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;

  .btn {
    padding: 20px 40px;
    height: 56px;
    border: none;
    border-radius: 30px;
    color: #fff;
    // float: right;
    margin-right: 20px;
    font-size: 28px;
    margin-top: 10px;
    &.warning-btn{
      background: #38f;
    }
    &.light-blue-btn {
      background: transparent;
      border:2px solid #38f;
      color: #38f;
    }
    &.disabled-btn {
      background: #ccc;
      border:2px solid #ccc;
      color: #fff;
    }
  }
}
.upload-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .cardMsg {
    width: 50%;
    text-align: center;
    i {
      position: relative;
      top: 2px;
    } span {
      margin-left: 10px;
    }
  }
  .img-lists {
    width: 50%;
    padding: 20px;
  }
}
.van-uploader__preview-image {
  height: 180px!important;
}
.lastStep {
  margin-bottom: 160px
}
.area{
  &-title{
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    height: 88px;
    line-height: 88px;
    &-btn{
      padding: 0 32px;
      color: #F30C23;
      font-size: 28px;
      background-color: transparent;
      border: 0;
    }
    &-con{
      max-width: 50%;
      font-weight: 500;
      font-size: 32px;
      text-align: center;
    }
  }
}
.fail {
  background-color:#F20B22;
  color: #fff;
  padding: 20px;
  font-size: 28px;
  margin-bottom: 20px;
  line-height: 60px;
  text-align: center;
}
</style>